<template>
  <div class="baseList">
    <div class="tableBoxs">
      <div class="newBox">
        <button class="bt wt-120" @click="handleBulid()">新增护理项目</button>
      </div>

      <!-- 当数据为空需要占位时，会显示 cellEmptyContent -->
      <t-table
        :row-key="rowKey"
        :data="data"
        :columns="COLUMNS"
        vertical-align="middle"
        :hover="hover"
        :loading="dataLoading"
        tabel-content-width="100%"
        table-layout="fixed"
      >
        <!-- 序号 -->
        <template #rowIndex="{ rowIndex }">{{ rowIndex + 1 }}</template>

        <!-- 图片预览 -->
        <template #image="{ row }">
          <div>
            <div class="tdesign-demo-image-viewer__base">
              <t-image-viewer :images="[row.image]">
                <template #trigger="{ open }">
                  <div class="tdesign-demo-image-viewer__ui-image">
                    <img
                      alt="test"
                      :src="row.image"
                      class="tdesign-demo-image-viewer__ui-image--img"
                    />
                    <div
                      class="tdesign-demo-image-viewer__ui-image--hover"
                      @click="open"
                    >
                      <span> <BrowseIcon size="1.4em" /> 预览 </span>
                    </div>
                  </div>
                </template>
              </t-image-viewer>
            </div>
          </div>
        </template>

        <!-- 价格拼接 -->
        <template #price="{ row }">
          {{ isDecimals(row.price) ? row.price : row.price + '.00' }}
        </template>

        <!-- 按钮处理 -->
        <template #op="{ row }">
          <div class="operateCon">
            <a class="btn-dl" @click="handleClickDelete(row)">删除</a>

            <a class="font-bt" @click="handleEdit(row)">编辑</a>
            <a
              class="delete"
              :class="row.status === 1 ? 'btn-dl' : 'font-bt'"
              @click="handleForbidden(row)"
              >{{ row.status === 1 ? '禁用' : '启用' }}</a
            >
          </div>
        </template>
      </t-table>

      <!-- 分页 -->
      <t-pagination
        v-if="total > 10"
        v-model="pagination.pageNum"
        v-model:pageSize="pagination.pageSize"
        :total="total"
        @change="onPageChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { COLUMNS } from '../constants'

const dataLoading = ref(false) // 加载中
// 行的key
const rowKey = 'index'

// 接受父组件数据
const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {}
    }
  },
  total: {
    type: Number,
    default: 0
  },
  pagination: {
    type: Object,
    default: () => {
      return {
        pageSize: 10,
        pageNum: 1
      }
    }
  },
  visible: {
    type: Boolean,
    default: false
  }
})

// 接受父组件的方法
const emit = defineEmits([
  'onPageChange',
  'handleBulid',
  'handleEdit',
  'handleClickDelete',
  'handleForbidden'
])
// 新增按钮
const handleBulid = () => {
  emit('handleBulid')
}
// 点击删除
const handleClickDelete = (row) => {
  console.log('00000000000000000000000000000')
  emit('handleClickDelete', row)
}

// 禁用
const handleForbidden = (row) => {
  emit('handleForbidden', row)
}

// 编辑   参数为一行数据
const handleEdit = (row) => {
  emit('handleEdit', row)
}

const onPageChange = (val) => {
  emit('onPageChange', val)
}

// 判断当前参数是否包含小数点
const isDecimals = (val) => {
  if (String(val).indexOf('.') > -1) {
    return true
  }
  return false
}
</script>
